{% extends 'material-lib/web/layout.html.twig' %}

{% do script(['libs/bootstrap-datetimepicker.js','libs/jquery-validation.js', 'libs/select2.js' ,'app/js/material-lib/index/index.js']) %}

{% block page_body %}
  {% set sourceFrom = app.request.query.get('sourceFrom')|default('my') %}
<form id="material-search-form" action="{{ path('material_lib_browsing') }}" method="get" novalidate>
  <input type="hidden" class="js-page" name="page" value="1">
  <div class="source-btn row" role="group" aria-label="...">
    <ul class="nav nav-tabs col-sm-6 mb0">
      <li class="{% if sourceFrom == 'my' %}active{% endif %}" data-value="my"><a href="javascript:;" class="js-source-btn">{{'material_lib.my'|trans}}</a></li>
      <li class="{% if sourceFrom == 'public' %}active{% endif %}" data-value="public"><a href="javascript:;" class="js-source-btn">{{'material_lib.public'|trans}}</a></li>
      <li class="{% if sourceFrom == 'favorite' %}active{% endif %}" data-value="favorite"><a href="javascript:;" class="js-source-btn">{{'material_lib.favorite'|trans}}</a></li>
      <li class="{% if sourceFrom == 'sharing' %}active{% endif %}" data-value="sharing"><a href="javascript:;" class="js-source-btn">{{'material_lib.sharing'|trans}}</a></li>
    </ul>
     <div class="btn-group col-sm-6 hidden-xs">
      {% include 'material-lib/web/form/head.html.twig' %}
    </div>
    <input type="hidden" name="sourceFrom" value="{{ sourceFrom }}">
  </div>
  {% include 'material-lib/web/form/nav.html.twig' %}
  <div class="material-search-list material-tag js-material-tag">
    <span  class="all">{{'material_lib.search.tags'|trans}}</span>
      <div class="right-content">
        {% for tag in tags %}
          <span class="label label-default material-tag__label" data-id="{{ tag.id }}">{{ tag.name }}</span>
        {% endfor %}
        <input type="hidden" name="tagId">
      </div>
  </div>
  <div class="material-search-list bottom">
    <div class="hidden-xs">
      <div class="form-inline row mbl">
        <div class="col-sm-4 col-md-5">
          <label class="form-label">{{ 'admin.cashflow.keyword'|trans }}：</label>
          <select name="keywordType" class="form-control form-input-width">
            <option value="title">{{ 'material_lib.search.type.title'|trans }}</option>
            <option value="course">{{'material_lib.search.type.course'|trans}}</option>
          </select>
          <input class="form-control form-input-width mll" type="text" placeholder="{{'material_lib.search.input_placeholder'|trans}}" maxlength="50" name="keyword" value="{{ app.request.get('keyword') }}">
        </div>
        <div class="col-sm-8 col-md-7 form-group">
          <label class="form-label">{{ 'material.common_table.th.upload_time'|trans }}：</label>
          <input class="form-control input-time form-input-width-sm" autocomplete="off" type="text" id="startDate" name="startDate" value="" placeholder="{{'material_lib.search.conditions.start_time'|trans}}"><span class="input-space">-</span><input class="form-control input-time form-input-width-sm" autocomplete="off" type="text" id="endDate" name="endDate" value="" placeholder="{{'material_lib.search.conditions.finish_time'|trans}}" >
        </div>
      </div>
      <div class="form-inline row">
        <div class="col-sm-4 col-md-5 form-group">
          <label class="form-label">{{ 'material.common_table.th.transcode_status'|trans }}：</label>
          <select class="form-control js-process-status-select form-input-width-md" name="processStatus">
            <option value="">{{ 'admin.cloud_file.select_placeholeder'|trans }}</option>
            <option value="waiting">{{ 'material.common_table.transcode_waiting'|trans }}</option>
            <option value="ok">{{'material_lib.search.conditions.convert_status.success'|trans}}</option>
            <option value="processing">{{'material_lib.search.conditions.convert_status.doing'|trans}}</option>
            <option value="error">{{'material_lib.search.conditions.convert_status.error'|trans}}</option>
            <option value="nonsupport">{{ 'material.common_table.transcode_file_not_support'|trans }}</option>
            <option value="noneed">{{ 'material.common_table.no_need_transcode'|trans }}</option>
          </select>
        </div>
        <div class="col-sm-8 col-md-7">
            <label class="form-label">{{ 'admin.operation_invite.coupon.use_status_th'|trans }}：</label>
            <select class="form-control js-use-status-select form-input-width-md" name="useStatus">
              <option value="">{{ 'admin.cloud_file.select_placeholeder'|trans }}</option>
              <option value="unused">{{'material_lib.search.conditions.use_status.using'|trans}}</option>
              <option value="used">{{'material_lib.search.conditions.use_status.used'|trans}}</option>
            </select>
            {# <span class="input-group-btn js-search-btn"> #}
            <button class="cd-btn cd-btn-primary cd-ml24 material-search-list__btn js-search-btn">{{'material_lib.search.search_btn'|trans}}</button>
          {# </span> #}
          </div>
      </div>
    </div>
    <div class="visible-xs form-horizontal pvm phm">
     <div class="form-group row">
        <label class="col-xs-3 control-label padding-top7  pr0">{{ 'admin.cashflow.keyword'|trans }}：</label>
        <div class="col-xs-4 pr0">
          <select name="keywordType" class="form-control form-input-width">
            <option value="title">{{ 'material_lib.search.type.title'|trans }}</option>
            <option value="course">{{'material_lib.search.type.course'|trans}}</option>
          </select>
        </div>
        <div class="col-xs-1 pl0 pr0 text-center">
          <span class="search-space">&nbsp;</span>
        </div>
        <div class="col-xs-4 pl0">
          <input class="form-control" type="text" placeholder="{{'admin.cashflow.keyword'|trans}}"  name="keyword" value="{{ app.request.get('keyword') }}">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-xs-3 control-label padding-top7  pr0">{{ 'material.common_table.th.upload_time'|trans }}：</label>
        <div class="col-xs-4 pr0">
          <input class="form-control" type="text" id="startDate" name="startDate" value="" placeholder="{{'material_lib.search.conditions.start_time'|trans}}">
        </div>
        <div class="col-xs-1 pl0 pr0 text-center">
          <span class="search-space">—</span>
        </div>
        <div class="col-xs-4 pl0 ">
          <input class="form-control" type="text" id="endDate" name="endDate" value="" placeholder="{{'material_lib.search.conditions.finish_time'|trans}}" >
        </div>
      </div>
      <div class="form-group row">
        <label class="col-xs-3 control-label padding-top7  pr0">{{ 'material.common_table.th.transcode_status'|trans }}：</label>
        <div class="col-xs-9">
          <select class=" form-control js-process-status-select " name="processStatus">
            <option value="">{{ 'admin.cloud_file.select_placeholeder'|trans }}</option>
            <option value="waiting">{{ 'material.common_table.transcode_waiting'|trans }}</option>
            <option value="ok">{{'material_lib.search.conditions.convert_status.success'|trans}}</option>
            <option value="processing">{{'material_lib.search.conditions.convert_status.doing'|trans}}</option>
            <option value="error">{{'material_lib.search.conditions.convert_status.error'|trans}}</option>
            <option value="nonsupport">{{ 'material.common_table.transcode_file_not_support'|trans }}</option>
            <option value="noneed">{{ 'material.common_table.no_need_transcode'|trans }}</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-xs-3 control-label padding-top7  pr0">{{ 'admin.operation_invite.coupon.use_status_th'|trans }}：</label>
        <div class="col-xs-9">
          <select class="form-control js-use-status-select " name="useStatus">
            <option value="">{{ 'admin.cloud_file.select_placeholeder'|trans }}</option>
            <option value="unused">{{'material_lib.search.conditions.use_status.using'|trans}}</option>
            <option value="used">{{'material_lib.search.conditions.use_status.used'|trans}}</option>
          </select>
        </div>
      </div>
      <div class="form-group phm mb0">
        <button class="cd-btn cd-btn-primary btn-block js-search-btn">{{'material_lib.search.search_btn'|trans}}</button>
      </div>

    </div>
  </div>

  {% set uploaderToken = uploader_token('materiallib', app.user.id, 'private') %}
  {% set path = path('material_delete_modal_show') %}
  {% include 'material-lib/widget/material-button.html.twig' with { uploaderToken: uploaderToken, path: path } %}

  <div id="material-lib-items-panel">
    <div class="material-list-container" id="material-item-list" data-url="{{ path('material_lib_show_browsing') }}"></div>
  </div>
</form>
{% include 'material-lib/widget/error-modal.html.twig' %}
{% include 'material-lib/widget/tag-modal.html.twig' with { tagPath: path('material_batch_tag_show') } %}
{% endblock %}
